<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>关于我</title>
	<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
	<style>
		/* footer元素设置 */
		footer div .row {
			margin-bottom: 0.625rem;
			height: 6.25rem;
		}
		footer div .row [class*="col-md-3"] {
			height: 100px;
			margin-top: 1.875rem;
			text-align: center;
			border-right: 1px solid #122B40;
		}
	</style>
</head>
<body>
<!--导航栏-->
<nav th:replace="_fragments :: nav" class="navbar navbar-inverse navbar-static-top" role="navagation">
  <div class="container">
    <!-- logo -->
    <div class="navbar-header">
      <a href="#" class="navbar-brand">SJZD</a>
    </div>
	<div id="navbar" class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li ><a href="#"><i class="glyphicon glyphicon-home"></i>&nbsp;首页</a></li>
			<li ><a href="#"><i class="glyphicon glyphicon-th"></i>&nbsp;分类</a></li>
			<li ><a href="#"><i class="glyphicon glyphicon-tags"></i>&nbsp;标签</a></li>
			<li ><a href="#"><i class="glyphicon glyphicon-book"></i>&nbsp;归档</a></li>
			<li ><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;关于我</a></li>
		</ul>
		<form class="navbar-form navbar-right" role="search" target="_blank" method="post" action="#">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search" name="query">
				<span class="input-group-btn">
					<button type="submit" class="btn btn-default">
						<span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索
					</button>
				</span>
			</div>
		</form>
	</div>
  </div>
</nav>

<!-- 中间内容-->
<div class="container-fluid" style="margin-top: 3.125rem">
	<div class="panel panel-default">
		<div class="row" style="height: 500px">
			<div class="col-md-6">
				<div style="margin-left: 6.25rem;">
					<img src="../static/img/default.jpg" th:src="@{/img/admin/icon.jpg}" class="img img-responsive center-block">
				</div>
			</div> 
			<div class="col-md-4 col-md-offset-1">
				<div class="panel panel-group text-center" style="width: 60%;">
					<!-- 关于我 -->
					<div class="panel panel-success">
						<div class="panel-heading">
							<i class="glyphicon glyphicon-bullhorn"></i>&nbsp;关于我
						</div>
						<div class="panel-body">
							这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助.
						</div>
					</div>
					<ul class="list-group">
						<!-- 分类 -->
						<li class="list-group-item">
							<div>
								<a href="#" class="btn btn-primary">编程</a>
								<a href="#" class="btn btn-danger">人工智能</a>
								<a href="#" class="btn btn-info">前端</a>
								<a href="#" class="btn btn-info">大数据</a>
								<a href="#" class="btn btn-info">数据库</a>
								<a href="#" class="btn btn-info">数学</a>
							</div>
						</li>
						<!-- 标签 -->
						<li class="list-group-item">
							<div>
								<span class="label label-warning">java高并发</span>&nbsp; &nbsp;&nbsp;
								<span class="label label-danger">javaSE</span>&nbsp; &nbsp;&nbsp;
								<span class="label label-info">spring源码解读</span>
								<span class="label label-default">mysql</span>&nbsp; &nbsp;&nbsp;
								<span class="label label-primary">jvm</span>&nbsp; &nbsp;&nbsp;
								<span class="label label-success">redis</span>&nbsp; &nbsp;&nbsp;
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 底部 -->
<footer th:replace="_fragments :: footer" class="footer navbar-default navbar-static-bottom" >
	<div class="container-fluid" style="background-color: #3C763D;height: 200px;">
		<div class="row" style="height: 60%">
			<div class="col-md-3"><img src="../static/img/QR-code.jpg"  th:src="@{/img/QR-code.jpg}" class="img-rounded" height="80px" width="80px"></div>
			<div class="col-md-3" id="footer-freshBlogs-container">
				<div th:fragment="footer-fresh-div" >
					<strong>最新博客</strong>
					<div th:each="blog : ${blogs}">
						<a href="#" style="color: #0C1021" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">Dapibus ac facilisis in</a>
					</div>
					<!--/*-->
					<div>
						<a href="#">Morbi leo risus</a>
					</div>
					<div>
						<a href="#">Vestibulum at eros</a>
					</div>
					<!--*/-->
				</div>
			</div>
			<div class="col-md-3">
				<address>
					<strong>联系我</strong><br>
					<p>
						邮箱: <span th:text="#{footer.email}">121@136.com</span><br>
						QQ: <span th:text="#{footer.qq}">666666666</span><br>
						QQ群: <span th:text="#{footer.qqGroup}">666666666</span>
					</p>
				</address>
			</div>
			<div class="col-md-3">
				<strong>SJZD</strong><br>
				<p th:text="#{footer.introduce}">一个简易的博客</p>
			</div>
		</div>
		<div class="text-center" style="border-top: black 1px solid; width: 100%;">
			<div style="margin-top: 20px">
				<strong>Copyright &copy; 2019 - 2050 SJZD designed at CQUT</strong>
			</div>
		</div>
	</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script type="text/javascript" src="../static/jquery/jquery-3.4.1.min.js"></script>
<script tag="text/javascript" src="../static/js/bootstrap.min.js"></script>
<!--/*/</th:block>/*/-->
</body>
</html>